<template>
    <div>
        <a-button v-if="editType !== 'detail'" style="margin-bottom: 20px" @click="addOne()" type="primary"><a-icon type="plus" />新增</a-button>
        <a-table v-if="showTable" :pagination="false" bordered :data-source="dataSource" :columns="columns" style="max-height: 400px;overflow-y: auto">
            <template slot="productName" slot-scope="text, record,index">
                <a-input :disabled="editType == 'detail'"  placeholder="请输入" @click="showCommonModal(record,index)" v-model="record.productName"></a-input>
            </template>
            <template slot="count" slot-scope="text, record,index">
                <a-input-number :disabled="editType == 'detail'"  v-model="record.count" @change="setTotal(record,index)"></a-input-number>
            </template>
            <template slot="contractUnitPrice" slot-scope="text, record,index">
                <a-input-number :disabled="editType == 'detail'"  v-model="record.contractUnitPrice" @change="setTotal(record,index)"></a-input-number>
            </template>
            <span slot="money" slot-scope="text,record">
                {{text.money}}
            </span>
            <span slot="clientBonus" slot-scope="text,record">
                {{text.clientBonus}}
            </span>
<!--             <template slot="contractTotalPrice" slot-scope="text, record,index">
                <span v-if="!record.hideTotal">{{text}}</span>
            </template> -->
            <!-- <template slot="inputRange" slot-scope="text, record,index">
                <tableTdSelect v-if="showRoot" :inputType="record.inputType" :vauleFinal="record.inputRange" :canEdit="editType !== 'detail'" :index="index"  @selectTdCallBack="selectTdCallback"></tableTdSelect>
            </template> -->
            <template slot="operation" slot-scope="text, record,index">
                <span v-show="editType != 'detail'" style="color:red;margin-right:10px;cursor:pointer;" @click="deleteRow(index)">删除</span>
            </template>
        </a-table>
        <commonModal
                selectType="radio"
                modalTitle="商品选择"
                ref="commonModal"
                @getCommonModalData="getCommonModalData"
                :columns="modalColumns"
                apiUrl="hl/product/list?productStatus=0"
                :searchArr="searchArr"></commonModal>
    </div>
</template>
<script>
    import { getAction } from '@/api/manage'
    // import tableTdSelect from '@/components/tableTdSelect'
    import commonModal from '@/components/commonModal'
    export default {
        watch: {
            dataSource:{
                handle:function(val,oldVal){

                },
                deep:true,
            }
        },
        components: {getAction,commonModal },
        data () {
            return {
                secondBatchCode:'',
                showTable:true,
                currentIndex:0,
                modalColumns: [{
                    title: '质检项名称',
                    dataIndex: 'qualityInspectionName'
                }, {
                    title: '质检项类型',
                    dataIndex: 'tmQualityInspectionItemsId',
                    customRender: function (val, record, index) {
                        let str = ''
                        let arr = [
                            {
                                label: '生产工艺检验',
                                value: 1
                            },
                            {
                                label: '采购检验',
                                value: 2
                            },
                            {
                                label: '发货检验',
                                value: 3
                            }
                        ]
                        arr.forEach((e) => {
                            if (e.value == val) {
                                str = e.label
                            }
                        })
                        return str
                    }
                }
                ],
                searchArr: [
                    {
                        label: '质检项名称',
                        key: 'qualityInspectionName'
                    }

                ],
                inputTypeArr: [
                    {
                        label: '手动输入-数值',
                        value: '0'
                    },
                    {
                        label: '手动输入-文本',
                        value: '1'
                    },
                    {
                        label: '单选型',
                        value: '2'
                    },
                    {
                        label: '多选型',
                        value: '3'
                    },
                    {
                        label: '展开选择型',
                        value: '4'
                    }
                ]
            }
        },
        computed: {

        },
        props: {
            editType: {
                type: String,
                default: ''
            },
            pagetype: {
                type: String,
                default: ''
            },
            dataSource: Array,
            columns: Array,
            canEdit: Boolean
        },
        mounted () {
            console.log('vvv',this.columns)
        },
        methods: {
            setTotal(row,index){
                if(!row.productId || !row.count){
                    this.$set(row,'clientBonus','')
                    this.$set(row,'secondBatchBonus','');
                    this.$set(row,'pickUpCode','');
                    return false;
                }
                // this.showTable = false;
                
                let dataLength = this.dataSource.length;
                let contractTotalPrice
                let apiUrl = '/hl/clientReceive/queryClientBonusBySecondBatchCode';
                let params = {
                    secondBatchCode:this.secondBatchCode,
                    productId:row.productId,
                    count:row.count
                }
                if(this.pagetype == 'clientReveive'){
                    // contractTotalPrice = parseFloat(row.count) * parseFloat(row.clientRewards);
                    // this.$set(row,'bonus',parseFloat(contractTotalPrice).toFixed(2))
                    getAction(apiUrl, params).then((res) => {
                        if (res.success) {
                          // 把拿到的金额赋值在contractTotalPrice上
                          //todo 
                          contractTotalPrice = res.result.clientBonus;
                          this.$set(row,'clientBonus',parseFloat(contractTotalPrice).toFixed(2))
                          this.$set(row,'secondBatchBonus',res.result.secondBatchBonus);
                          this.$set(row,'pickUpCode',res.result.pickUpCode);
                          
                          this.$set(row,'time',Date.parse(new Date()))
                            this.$forceUpdate()
                            this.$nextTick(()=>{
                                    // this.showTable = true;
                                    delete this.dataSource[index]['time']
                                    console.log('gggggg',this.dataSource)
                                    console.log('ffffff',this.$parent)
                                    if(dataLength !== this.dataSource.length){
                                        this.dataSource.pop();
                                    }
                                })
                        } else {
                            this.$message.warning(res.message)
                            this.dataSource = this.dataSource.filter((e,eindex)=>{
                                return index !== eindex;
                            })
                        }   
                    }).finally(() => {
                        // that.close();
                    })
                }else if(this.pagetype == 'secondBatch'){
                    contractTotalPrice = parseFloat(row.count) * parseFloat(row.secondBatchOfAwards);
                    this.$set(row,'bonus',parseFloat(contractTotalPrice).toFixed(2))
                     this.$set(row,'time',Date.parse(new Date()))
                            this.$forceUpdate()
                            this.$nextTick(()=>{
                                    // this.showTable = true;
                                    delete this.dataSource[index]['time']
                                    if(dataLength !== this.dataSource.length){
                                        this.dataSource.pop();
                                    }
                                })
                }else{
                    contractTotalPrice = parseFloat(row.count) * parseFloat(row.wholesalePrice);
                    this.$set(row,'money',contractTotalPrice)
                     this.$set(row,'time',Date.parse(new Date()))
                            this.$forceUpdate()
                            this.$nextTick(()=>{
                                    // this.showTable = true;
                                    delete this.dataSource[index]['time']
                                    if(dataLength !== this.dataSource.length){
                                        this.dataSource.pop();
                                    }
                                })
                }
                
                
            },
            changeTD(){
                this.showRoot = false;
                this.$nextTick(()=>{
                    this.showRoot = true;
                })
            },
            selectTdCallback (val) {
                let row = this.dataSource[val.index]
                row.inputRange = val.data
            },
            getCommonModalTestingData(val) {
                this.$set(this.dataSource[this.currentIndex],'hlTestingName',val[0].testingName)
                this.$set(this.dataSource[this.currentIndex],'hlTestingId',val[0].id)

                this.$forceUpdate();
            },
            getCommonModalData(val) {
                if(this.dataSource.some((e)=>{return e.productId == val[0].id})){
                    this.$message.error('不可重复选择该商品')
                    return false;
                }
                this.$set(this.dataSource[this.currentIndex],'productName',val[0].productName)
                this.$set(this.dataSource[this.currentIndex],'productId',val[0].id)
                this.$set(this.dataSource[this.currentIndex],'wholesalePrice',val[0].wholesalePrice)
                this.$set(this.dataSource[this.currentIndex],'secondBatchOfAwards',val[0].secondBatchOfAwards * (val[0].prizePoolRatio)/100)
                this.$set(this.dataSource[this.currentIndex],'clientRewards',val[0].clientRewards * (val[0].prizePoolRatio/100))
                this.setTotal(this.dataSource[this.currentIndex],this.currentIndex)
                this.$forceUpdate();

            },
            getCommonModalQalityData (val) {
              this.$set(this.dataSource[this.currentIndex],'hlQualityInspectionName',val[0].qualityInspectionName)
                this.$set(this.dataSource[this.currentIndex],'hlQualityInspectionId',val[0].id)
                this.$forceUpdate();
            },
            showCommonModal(row,index){
                this.currentIndex = index;
                this.modalColumns = [{
                        title: '产品名称',
                        dataIndex: 'productName'
                    },
                    {
                        title:'产品编号',
                        dataIndex:'productCode'
                    }
                    ]
                    this.searchArr = [
                        {
                            label: '产品名称',
                            key: 'productName'
                        }
                    ]
                    this.$refs.commonModal.open()
            },
            deleteRow(rowIndex){
                this.dataSource = this.dataSource.filter((e,index)=>{
                    return index !== rowIndex;
                })
            },
            addOne(){
                this.dataSource.push({});
            },
            rowResort(rowIndex,type){
                let obj = JSON.parse(JSON.stringify(this.dataSource[rowIndex]));
                this.dataSource.splice(rowIndex,1)
                if(type == 'down'){
                    this.dataSource.splice(rowIndex+1,0,obj)
                }else{
                    this.dataSource.splice(rowIndex-1,0,obj)
                }
                this.changeTD();
            },
            _handleRowMoveUp (rowIndex) {
                if (rowIndex > 0) {
                    let newIndex = rowIndex - 1
                    this.rowResort(rowIndex,'up')
                }
            },
            _handleRowMoveDown (rowIndex) {
                if (rowIndex < (this.dataSource.length - 1)) {
                    this.rowResort(rowIndex, 'down')

                }
            },
        }
    }
</script>
<style scoped>

</style>
